<template>
  <div class="footerBar">
    <div
      class="musicItem"
      @click="itemClick(0, '/music')"
      :class="{ active: currentIndex === 0 }"
    >
      <i class="iconfont icon-yinle"></i>
      <span>音乐</span>
    </div>
    <div
      class="videoItem"
      @click="itemClick(1, '/video')"
      :class="{ active: currentIndex === 1 }"
    >
      <i class="iconfont icon-shipin"></i>
      <span>视频</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "FooterBar",
  data() {
    return {
      currentIndex: 0,
    };
  },
  methods: {
    itemClick(index, path) {
      this.currentIndex = index;
      if (this.$route.path === path) return;
      this.$router.push(path);
    },
  },
};
</script>

<style lang="scss" scoped>
.footerBar {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  width: 100%;
  height: 3rem;
  background-color: #fff;
  box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.1);
  div {
    flex: 1;
    height: 3rem;
    text-align: center;
    line-height: 3rem;
    font-size: 1rem;
    cursor: pointer;
    i {
      margin-right: 0.5rem;
      font-size: 1rem;
    }
  }
  div.active {
    color: #21d49b;
  }
}
</style>